<template>
  <div class="songlist">
    <ul v-if="!show">
      <li class="head">
        <div style="width:5%"></div>
        <div style="width:8%">操作</div>
        <div style="width:33%">音乐标题</div>
        <div style="width:23%">歌手</div>
        <div style="width:21%">专辑</div>
        <div style="width:11%">时长</div>
      </li>
      <li
        @click="play(item)"
        class="songlist-item"
        v-for="(item, index) in his"
        :key="item.id"
      >
        <div style="width:5%">
          {{ index + 1 >= 10 ? index + 1 : "0" + parseInt(+index + 1) }}
        </div>
        <div style="width:8%">
          <img
            @click.stop="love($event, item)"
            v-if="!loves.some((a) => a.id == item.id)"
            src="../../assets/love.png"
          />
          <img
            @click.stop="love($event, item)"
            v-else
            src="../../assets/love-s.png"
          />
          <img src="../../assets/xia.png" />
        </div>
        <div style="width:33%">{{ item.name }}</div>
        <div style="width:23%">{{ item.ar[0].name }}</div>
        <div style="width:21%">{{ item.al.name }}</div>
        <div style="width:11%">{{ item.dt | durationToTime }}</div>
      </li>
    </ul>
    <div class="result" v-if="show">
      没能找到与
      <span>"{{ search }}"</span>想关的任何音乐
    </div>
  </div>
</template>
<script>
import loveS from "@/assets/love-s.png";
import love from "@/assets/love.png";
import Vue from "vue";
import { mapState } from "vuex";
export default {
  props: ["his", "search", "show"],

  methods: {
    love(e, item) {
      let mylove = {
        id: item.id,
        songname: item.name,
        name: item.ar[0].name,
        zj: item.al.name,
        time: item.dt,
      };
      let findId = this.loves.find((love) => love.id == item.id);
      if (findId) {
        this.$alert({
          title: "确定将选中的歌曲从我喜欢的音乐中删除?",
          ok: () => {
            e.target.src = love;
            this.$store.commit("dellove", item.id);
            this.$box("取消喜欢成功");
          },
        });
      } else {
        e.target.src = loveS;
        this.$store.commit("addlove", mylove);
        this.$box();
      }
    },
    play(item) {
      let { name, id, dt, ar } = item;
      let playlist = {
        songName: name,
        id,
        name: ar[0].name,
        time: Vue.options.filters.durationToTime(dt),
      };
      this.$store.commit("addPlayList", playlist);
      this.$store.commit("play", id);
    },
  },
  computed: {
    ...mapState(["loves"]),
  },
};
</script>
<style lang="less" scoped>
.songlist {
  ul {
    list-style-type: none;
    font-size: 13px;
    color: #666;
    li:first-child {
      display: flex;
      div {
        text-indent: 10px;
        border: 1px solid #e1e1e2;
        height: 30px;
        line-height: 27px;
        margin: 0px 0px -1px -1px;
        &:hover:not(:first-child):not(:nth-child(2)) {
          background-color: #ebeced;
        }
      }
      div:last-child {
        border-right: none;
      }
    }
    .songlist-item {
      div:first-child {
        text-indent: 15px;
      }
      display: flex;
      line-height: 30px;
      height: 30px;
      text-indent: 10px;
      div {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .s {
        background: url("../../assets/love-s.png") no-repeat;
        background-size: 20px;
      }
      img {
        width: 20px;
        height: 20px;
        margin: 2px;
      }
      &:nth-child(odd) {
        background-color: #f5f5f7;
      }
      &:hover {
        background-color: #ebeced;
      }
    }
  }
  .result {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10%;
    span {
      color: #5d73cc;
    }
  }
}
</style>
